<style scoped>
  .uploader-example {
    width: 880px;
    padding: 15px;
    margin: 40px auto 0;
    font-size: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  }
  .uploader-example .uploader-btn {
    margin-right: 4px;
  }
  .uploader-example .uploader-list {
    max-height: 440px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
<template>
  <fileupload v-if="orderid != undefined" :target="'/fileUpload/upload.action?orderid=' + orderid" name="file" action="POST" v-on:getFilename="setFilename" v-on:progress="progress" v-on:start="startUpload" v-on:finish="finishUpload"></fileupload>
  <fileupload v-else target="/fileUpload/upload.action" name="file" action="POST" v-on:getFilename="setFilename" v-on:progress="progress" v-on:start="startUpload" v-on:finish="finishUpload"></fileupload>
</template>
<script>
  import FileUpload from 'vue-simple-upload/dist/FileUpload'

  export default {
    name: 'UploadFile',
    data() {
      return {
        filename: '',
        openid: localStorage.openid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
      }
    },
    props: [
      'orderid'
    ],
    components: {
      'fileupload': FileUpload
    },

    watch: {
      'filename': function () {

      }
    },
    methods: {
      emitter (event, data) {
        this.$emit(event, data)
      },
      startUpload(e) {
        $.showLoading("上传中");
      },
      finishUpload(e) {
        $.hideLoading()

        let response = JSON.parse(e.currentTarget.response);
        if (response != null && response.msg == 'success') {
          let thisfile = {
            name: this.filename,
            id: response.fileid
          }
          console.log('thisfile:', thisfile)
          this.emitter('pushfile', thisfile);
        }
        console.log('finishUpload:', e)
      },
      progress(e) {
        // file upload progress
        // returns false if progress is not computable
        console.log(e);
      },
      setFilename(e) {
        this.filename = e.name;
      }
    }
  }
</script>

